<template>
  <div class="parent">
    <h3>provide/inject 演示 -- 父组件向后代组件传递数据: {{car.name}} ~ {{car.price}}万</h3>
    <button @click="car.name += '*'">修改车名</button>
    <button @click="car.price++">修改价格</button>
    <br>
    <br>
    <child></child>
  </div>

  <hr>
  <p>
    注意:<br>
    1. 通常，当我们需要从父组件向子组件传递数据时，我们使用 props。想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。<br>
    2. 对于深层次父子组件之间的数据传递,provide/inject是一个很好的方法.<br>
    官方文档: <a href="https://v3.cn.vuejs.org/guide/component-provide-inject.html"><b>provide / inject</b></a>
  </p>
</template>

<script>
import { provide, reactive } from 'vue'
import child from './child.vue'

export default {
  components: {
    child
  },
  setup() {
    let car = reactive({name: '东风II', price: '80'})
    provide('car', car)
    return {car}
  },
}
</script>

<style scoped>
  button {
    margin-left: 5px;
  }

  .parent {
    background-color: #8ae;
    padding: 10px;
  }
</style>